<script setup name="login" lang="ts">
import { LOGIN_TYPE_ENUM, LOGIN_TYPE_OPTIONS } from "@/pages/login/const";
import { getPhoneCodeApi } from "@/api/login";

const fullPath = ref('')

const userStore = useUserStore();

const loginTypeActive = ref<LOGIN_TYPE_ENUM>(LOGIN_TYPE_ENUM.phone);

/**
 * 登陆类型切换
 * @param item
 */
const changeType = (item) => {
  loginTypeActive.value = item.value;
}

const passwordShow = ref(true);


const codeCountdown = ref(0);

let interval = null;

const setCountdown = () => {

  interval = setInterval(() => {
    if (codeCountdown.value <= 1) {
      clearInterval(interval);
      interval = null;
    }
    codeCountdown.value--;
  }, 1000)
}

const getPhoneCode = () => {
  if (codeCountdown.value == 0) {
    codeCountdown.value = 60;
    getPhoneCodeApi().catch(err => {
      codeCountdown.value = 0;
      clearInterval(interval);
    });
    setCountdown();
  } else {
    uni.showToast({
      icon: 'fail',
      title: '验证码获取中...',
      duration: 2000
    });
  }
}

const form = ref<LoginFormRecord>({
  username: 'admin',
  password: 'admin123'
})

const handerLogin = () => {
  userStore.login(form.value).then(response => {
    uni.redirectTo({
      url: fullPath.value,
      fail() {
        // uni.navigateBack()
        uni.switchTab({ url: fullPath.value })
      }
    })
  })
}

onLoad(query => {
  fullPath.value = query.fullPath;
})
</script>

<template>
  <view class="app-container">
    <view class="login-box">
      <view class="app-img">
        <image src="/static/logo.png" />
      </view>
      <view class="login-item">
        <uni-icons type="person" size="22" />
        <input v-model="form.username" />
      </view>
      <view class="login-item" v-if="loginTypeActive == LOGIN_TYPE_ENUM.phone">
        <uni-icons
            :type="passwordShow?'locked-filled':'locked'"
            size="22"
            @click="passwordShow = !passwordShow"
        />
        <input v-model="form.password" :password="passwordShow" />
        <view class="line" />
        <view class="code-box" v-if="codeCountdown">{{ codeCountdown }} s</view>
        <view class="code-box" v-else @click="getPhoneCode">获取验证码</view>
      </view>
      <view class="login-item" v-else>
        <uni-icons
            :type="passwordShow?'locked-filled':'locked'"
            size="22"
            @click="passwordShow = !passwordShow"
        />
        <input v-model="form.password" :password="passwordShow" />
      </view>

      <button class="login-button" @click="handerLogin">登 陆</button>
      <view class="tabs">
        <view
            class="tab"
            :class="{'active': loginTypeActive == item.value}"
            v-for="item in LOGIN_TYPE_OPTIONS"
            :key="item.value"
            @click="changeType(item)"
        >
          {{ item.label }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>


.app-container {
  padding-top: 85rpx;
}

.login-box {
  //margin-top: 45rpx;
  background-color: #fff;
  border-radius: 30rpx;
  margin: 0 30rpx;
  padding: 60rpx 30rpx;

  .app-img {

    text-align: center;

    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 70rpx;
      margin: auto;
    }
  }

  .login-item {
    border: 2rpx solid $uni-border-1;
    margin: 50rpx auto;
    width: 600rpx;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;

    uni-icons {
      margin: 0 25rpx;
    }

    .uni-icons {
      margin: 0 25rpx;
    }

    input {
      flex: 1;
    }

    .line {
      width: 2rpx;
      height: 30rpx;
      background-color: $uni-info;
      margin: 0 12rpx;
    }

    .code-box {
      width: 150rpx;
      margin-right: 25rpx;
      color: $uni-info;
    }
  }

  .login-button {
    font-size: 16px;
    width: 600rpx;
    height: 80rpx;
    border-radius: 40rpx;
    line-height: 80rpx;
    background-color: $uni-primary;
    color: $uni-white;
  }

  .tabs {
    display: flex;
    justify-content: center;
    margin-top: 50rpx;

    .tab {
      margin: 0 25rpx;
    }

    .tab.active {
      color: $uni-primary;
    }
  }
}
</style>
